<template>
  <el-upload
    class="upload-demo"
    drag
    :limit="1"
    :on-exceed="handleExceed"
    action
    :http-request="upload"
    :on-remove="handleRemove"
    :file-list="fileList"
    :before-upload="beforeAvatarUpload"
    multiple
  >
    <img
      style="width:100%;"
      v-show="fileList.length"
      v-for="item in fileList"
      :key="item.url"
      :src="item.url"
      alt
    />
    <i class="el-icon-upload" v-show="!fileList.length"></i>
    <div class="el-upload__text">
      将文件拖到此处，或
      <em>点击上传</em>
    </div>
    <div class="el-upload__tip" slot="tip">
      只能上传jpg/png文件，且不超过1M
      <!-- <button size="mini" @click="abc(1)">预览</button> -->
    </div>
  </el-upload>
</template>
<script>
export default {
  data() {
    return {
      fileList: [],
      validWidth: 100,
      validHeight: 100
    };
  },
  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    handleRemove(file, fileList) {
      /**删除图片钩子 */
      console.log(file, fileList);
      this.fileList = fileList;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      console.log(file);

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }

      //如果要验证宽高
      //this.validWidth  由上级组件传入 props 接收
      //this.validHeight 由上级组件传入 props 接收
      let validWidthAndHeight = true;
      if (this.validWidth && this.validHeight) {
        return this.valWidthAndHeight(file);
      } else return isJPG && isLt2M;
    },

    valWidthAndHeight(file) {
      let _this = this;
      return new Promise(function(resolve, reject) {
        let width = _this.validWidth; //图片宽度
        let height = _this.validHeight; //图片高度
        let _URL = window.URL || window.webkitURL;
        let image = new Image();
        image.src = _URL.createObjectURL(file);
        image.onload = function() {
          let valid = image.width == width && image.height == height;
          valid ? resolve() : reject();
        };
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error(
            "上传图片尺寸不符合,只能是" +
              _this.validWidth +
              "*" +
              _this.validHeight +
              "!"
          );
          return Promise.reject();
        }
      );
      return isSize;
    },
    upload(e) {
      /**上传 */
      let imgFile = e.file; //取到上传的图片

      let formData = new FormData(); //通过formdata上传
      formData.append("dir", "brand");
      formData.append("file", imgFile);
      console.log(formData);
      let url = "/upfile5";
      let that = this;
      //   let res =  posthttp.postimg("upfile5", formData);

      //   if (res.ret == 0) {
      //     let objSrc = {};
      //     this.list.imagePath = res.result.image;
      //     objSrc.url = res.result.src;
      //     objSrc.name = res.result.image;
      //     console.log(objSrc);
      //     this.list.imageSrc = objSrc.url;
      //     this.fileList.push(objSrc);
      //     this.$notify({
      //       title: "成功",
      //       message: "上传成功",
      //       type: "success"
      //     });
      //   } else {
      //     this.$notify.error({
      //       title: "错误",
      //       message: "失败"
      //     });
      //   }
    }
  }
};
</script>